import React, { useState, useEffect } from 'react';
import { Modal, Form, Cascader } from 'antd';
import {
  ModalForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage } from 'umi';
import { authority } from '@/services/ant-design-pro/api';

import { ProFormCascader } from '@ant-design/pro-form';
import { deptList } from  '@/services/ant-design-pro/dept';
import {transformList2Tree} from '@/utils/utils'

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.DeptItem>;

export type UpdateFormProps = {
  visible: boolean;
  onVisibleChange: (flag?: boolean) => void;
  onFinish: (id: number, values: FormValueType) => Promise<void>;
  values?: any;
}

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  console.log('编辑表单--->', props)
  /** 国际化配置 */
  const intl = useIntl();

  return (
    <ModalForm
        title={intl.formatMessage({
          id: 'pages.searchTable.createForm.newAuthority',
          defaultMessage: '新建角色',
        })}
        width="400px"
        visible={props.visible}
        onVisibleChange={props.onVisibleChange}
        onFinish={(values) => props.onFinish(props.values.id, values)}
        modalProps={{
          forceRender: true,
          destroyOnClose: true,
        }}
      >
      <Form.Item name="parentId" label={props.values.parentId}>
      <ProFormCascader
        initialValue={props.values.parent_id}
        name="parent_id"
        label="上级部门"
        width="md"
        request={async() => {
          const data = await deptList()
          return transformList2Tree(data.data!.map((d) => ({
            label: d.dept_name,
            value: d.id,
            id: d.id,
            pid: d.parent_id
          })))
        }}
      />
      </Form.Item>
      <ProFormText
      initialValue={props.values.dept_name}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.searchTable.ruleName"
                  defaultMessage="部门名称为必填项"
                />
              ),
            },
          ]}
          width="md"
          name="dept_name"
        />
      </ModalForm>
  )
}

export default UpdateForm;
